<template>
	<div class="joinus-box">
		<div class="joinus-simg">
			<div class="joinus-bg">
				<div class="joinus-bg_cto">
					<p class="joinus-bg_h1">数字科技服务实体经济</p>
					<p class="joinus-bg_h1">开放连接践行普惠赋能</p>
				</div>
			</div>
			<div class="joinus-simg_mark" v-if="false">
				<div class="joinus-simg_k1"></div>
				<img class="joinus-simg_k2" src="https://bbp.5ug.com/wwwroot/uploads/api/980-617-609/2021-08-21/6120a3bf261c478efb939baa.png" />
				<div class="joinus-simg_k1"></div>
			</div>
		</div>
		<div class="joinus-h1">拓展一片崭新的原野</div>
		<div class="joinus-title">加入新力量，成为我们的一员</div>
		<div class="joinus-intro">{{viewModel.description}}</div>
		<div class="joinus-fot">
			<div class="joinus-fot_t1">虚位以待</div>
			<div class="joinus-fot_t2">
				<div class="joinus-fot_t3" :class="{'joinus-fot_act':tabCurrentIndex==index}" @click="tabCurrentIndex=index" v-for="(item,index) in tabList" :key="index">{{item.name}}</div>
			</div>
			<div v-for="(vItem,vIndex) in tabList[tabCurrentIndex].arrList" :key="vIndex">
				<div class="joinus-fot_t4">{{vItem.title}}</div>
				<div class="joinus-fot_t5">{{vItem.title}} 要求：</div>
				<div class="joinus-fot_t6" v-for="(gItem,gIndex) in vItem.introList" :key="gIndex">{{gIndex+1}}、{{gItem}}</div>
				<div class="joinus-fot_bot">
					<p class="joinus-fot_li">为确保我们能顺利看到你的作品，简历和作品集需提供PDF或PPT格式文件，并总大小小于10M。</p>
					<p class="joinus-fot_li" v-if="false">发送至 <span class="joinus-fot_vt">{{infoRes.user.email}}</span></p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				viewModel: {},
				webSiteConfig: {},
				tabList: [{
					name: '运营',
					arrList: [{
						title: '运营经理',
						introList: [
							'负责制定公司APP产品的运营推广方案，利用内外资源进行运营推广工作，提升产品的用户数和活跃度及粘性；',
							'负责产品活动的策划及媒介拓展，负责软文撰写、微博营销、事件营销等线上线下推广活动的策划和执行',
							'提供产品分析报表，跟踪和分析推广和运营数据，改进产品推广和产品设计；',
							'负责分析用户数据、竞争产品动态与行业资讯，并参与产品的规划和设计。',
							'负责拓展行业内有价值的营销渠道资源，建立和维护资源合作伙伴关系。',
							'负责和用户双向沟通,取得有效用户反馈,回答用户问题,比如建立QQ群,微博群,微信群等。'
						]
					}]
				}, {
					name: '推广',
					arrList: [{
						title: '商务经理',
						introList: [
							'了解移动互联网，有运营商销售工作经验或互联网公司运营商务的经验者优先；',
							'建立APP产品推广省内外网络与代理商 ；',
							'制定商业销售策略和政策，推进各区域代理商洽谈与合作；',
							'监控和指导代理商的工作进度，核查并监控了解各区域市场渠道推广状况和真实性 ；',
							'具有敏锐的商业敏感度和卓越的商务洽谈能力，自主关系建立能力强'
						]
					}, {
						title: '电话推广经理',
						introList: [
							'较全面掌握APP产品注册知识及流程，通过电话沟通了解客户是否属于公司产品潜在用户，推荐并指导用户注册APP产品并应用扩散；',
							'开发新用户，拓展与老用户的业务，建立和维护客户档案；',
							'具备优秀的电话沟通技巧、表达技巧和推广技巧，普通话标准流利，声音甜美，责任心强，服务意识强；',
							'一年以上相关工作经验，有呼叫中心客服人员工作经验者优先；'
						]
					}]
				}, {
					name: '产品',
					arrList: [{
						title: '产品经理',
						introList: [
							'负责App产品策划和设计，提供需求分析、产品原型及功能描述的撰写；',
							'跟进UI设计、产品研发与测试，确保产品功能特性、交互和效果图符合产品需求文档的要求；',
							'负责产品生命周期的需求分析、产品定义、交互逻辑、用户体验等工作。制定版本迭代计划、提升与优化用户体验；',
							'收集分析处理用户意见反馈，以便于挖掘用户的真正需求；'
						]
					}, {
						title: '.net软件开发工程师',
						introList: [
							'了解.net core 或 C#开发，一年以上开发经验，优秀应届生亦可；',
							'熟练使用 Visual Studio 以及Sql Server等开发工具；',
							'熟悉B/S开发，了解网页开发知识，了解.net MVC开发，了解Entity Framework、LINQ等，熟悉面向对象编程；',
							'熟悉MS SQL数据库，能编写SQL语句，熟悉mongodb优先；'
						]
					}]
				}, {
					name: '技术',
					arrList: [{
						title: 'VUE软件开发工程师',
						introList: [
							'大专或以上学历，有1年或以上开发经验；',
							'熟练掌握h5+css3+js等前端Web基础知识；',
							'熟悉Vue.js开发，熟悉基于uni-app的开发；'
						]
					}, {
						title: '美工UI设计师',
						introList: [
							'负责移动端产品整体UI设计；公司美工广告图片处理等；',
							'参与产品规划构思和创意过程；',
							'关注用户反馈与沟通，根据分析结果持续优化设计；',
							'2年以上移动端设计经验；',
							'快速高效的图片处理能力；',
							'有完整作品集可供参考，面试时请带上个人作品资料。'
						]
					}]
				}],
				tabCurrentIndex: 0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.viewModel = await this.$ala.httpGet('api/AutoConfig/Get', {
					type: 'WebSiteConfig'
				})
			}
		}
	}
</script>
<style lang="scss">
	.joinus-box {
		.joinus-simg {
			width: 100%;
			height: 484px;
			background-color: #000;
			position: relative;

			.joinus-bg {
				width: 1002px;
				height: 484px;
				background: url('https://bbp.5ug.com/wwwroot/uploads/api/980-617-609/2021-08-21/6120c62f261c478efb93df6c.png') no-repeat;
				background-size: 100% 100%;
				margin: auto;
				position: relative;

				.joinus-bg_cto {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);

					.joinus-bg_h1 {
						width: 1002px;
						font-size: 54px;
						color: #fff;
						font-weight: 500;
						letter-spacing: 15px;
						line-height: 80px;
						text-align: center;
					}
				}
			}

			.joinus-simg_mark {
				width: 100%;
				height: 40px;
				position: absolute;
				bottom: 0;
				z-index: 10;
				display: flex;
				align-items: center;

				.joinus-simg_k1 {
					height: 40px;
					flex: 1;
					background-color: #FFFFFF;
				}

				.joinus-simg_k2 {
					width: 120px;
					height: 40px;
				}
			}
		}

		.joinus-h1 {
			font-size: 18px;
			color: #7F7E7E;
			text-align: center;
			margin-top: 50px;
		}

		.joinus-title {
			text-align: center;
			font-size: 34px;
			color: #000a1f;
			margin-top: 30px;
		}

		.joinus-intro {
			max-width: 840px;
			font-size: 18px;
			color: #7F7E7E;
			line-height: 30px;
			margin-left: auto;
			margin-right: auto;
			padding: 30px 0 90px;
		}

		.joinus-fot {
			width: 1002px;
			margin: auto;
			padding-bottom: 40px;

			.joinus-fot_t1 {
				font-size: 34px;
				color: #000a1f;
				text-align: center;
				margin-bottom: 50px;
			}

			.joinus-fot_t2 {
				display: flex;
				align-items: center;
				margin-bottom: 50px;
			}

			.joinus-fot_t3 {
				line-height: 45px;
				font-size: 18px;
				color: #333333;
				flex: 1;
				text-align: center;
				cursor: pointer;
			}

			.joinus-fot_act {
				color: #07B6FF;
			}

			.joinus-fot_t4 {
				font-size: 18px;
				color: #07B6FF;
				border-bottom: 3px solid #7C7C7C;
				padding-left: 30px;
				line-height: 30px;
				margin-top: 20px;
			}

			.joinus-fot_t5 {
				font-size: 16px;
				color: #333333;
				padding-left: 30px;
				margin-top: 10px;
				line-height: 30px;
			}

			.joinus-fot_t6 {
				font-size: 16px;
				color: #7e7e7e;
				line-height: 30px;
			}

			.joinus-fot_bot {
				padding: 15px;
				margin-top: 5px;
				border-top: 1px solid #dddddd;

				.joinus-fot_li {
					font-size: 16px;
					color: #7e7e7e;
					line-height: 20px;
				}

				.joinus-fot_vt {
					color: #0962FF;
				}
			}
		}
	}
</style>